<template>
  <!-- 新增字段对话框 -->
  <el-dialog :visible.sync="visible" title="新增字段"
             @close="closeDialog"
             width="30%">
    <el-row class="bottom-space">
      <el-col :span="6">字段名称</el-col>
      <el-col :span="18">
        <el-input v-model="newFieldName" placeholder="请输入字段名称"></el-input>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="6">字段类型</el-col>
      <el-col :span="18">
        <el-select v-model="selectedKind"
                   placeholder="请选择字段类型"
                   style="width: 100%"
                   @change="handleKindSelected">
          <el-option v-for="option in kindOptions"
                     :key="option.value"
                     :label="option.name"
                     :value="option.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row v-if="showKindValueSelection">
      <el-col :span="6">{{newKind}}</el-col>
      <el-col :span="18">
        <el-select v-model="kindValue" style="width: 100%">
          <el-option v-for="option in kindValueOptions"
                     :key="option.id"
                     :label="option.name"
                     :value="option.id">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <span slot="footer" class="ke-dialog-footer">
              <el-button @click="closeDialog">取 消</el-button>
              <el-button type="primary" @click="addNewField">确 定</el-button>
            </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "NewFieldDialog",
    data() {
      return {
        visible: false,
        showKindValueSelection: false,
        newFieldName: '',
        selectedKind: 0,
        newKind: '',
        kindValue: '',
        kindValueOptions: [],
        kindOptions: [{
          name: "文本",
          value: 0
        }, {
          name: "富文本",
          value: 1
        }, {
          name: "分类",
          value: 2
        }, {
          name: "单选下拉框",
          value: 3
        }, {
          name: "图片",
          value: 4
        }, {
          name: "多选下拉框",
          value: 5
        }, {
          name: "文本域",
          value: 6
        }, {
          name: "多值输入框",
          value: 7
        }, {
          name: "关联本知识库",
          value: 8
        }, {
          name: "关联其他知识库",
          value: 9
        }, {
          name: "关联应用平台",
          value: 10
        }, {
          name: "视频",
          value: 11
        }, {
          name: "文件",
          value: 12
        }],
      }
    },
    props: ['knowledgeData'],
    methods: {
      closeDialog() {
        this.showKindValueSelection = false
        this.newKind = ""
        this.kindValue = ""
        this.kindValueOptions = []
        this.newFieldName = ""
        this.selectedKind = 0
        this.visible = false
      },
      nameIsRepeated(name) {
        let isRepeated = false
        this.knowledgeData.knowledgeFieldList.forEach(field => {
          if (name === field.name) {
            isRepeated = true
          }
        })
        return isRepeated
      },
      addNewField() {
        if (this.newFieldName === "") {
          this.$message.error("必须填写字段名称")
          return
        } else if (this.selectedKind === "") {
          this.$message.error("必须选择字段类型")
          return
        }
        if (this.nameIsRepeated(this.newFieldName)) {
          this.$message.error("字段名称重复")
          return
        }
        if (this.showKindValueSelection && !this.kindValue) {
          this.$message.error(this.nameKind + "不能为空")
          return
        }
        let field = {
          knowledgeId: this.knowledgeData.id,
          index: this.knowledgeData.knowledgeFieldList.length,
          name: this.newFieldName,
          required: false,
          selected: false,
          kind: this.selectedKind,
          kindValue: this.kindValue,
          source: [],
          property: CONST.KNOWLEDGE_FIELD_VALUE_DEFAULT[this.selectedKind]
        }
        if (CONST.KNOWLEDGE_FIELD_VALUE_JSON_TYPE_ARRAY.includes(field.kind)) {
          field.fieldValue = JSON.parse(field.property)
        }
        else {
          field.fieldValue = field.property
        }
        this.knowledgeData.knowledgeFieldList.push(field)
        this.closeDialog()
      },
      async handleKindSelected(value) {
        this.nameKind = ''
        this.kindValue = ''
        this.showKindValueSelection = true
        if (value === 2) {
          this.kindValueOptions = this.$store.state.tagTree
          this.newKind = "选择分类"
        } else if (value === 3) {
          this.kindValueOptions = this.$store.state.ruleList.filter(rule => rule.type === 'single')
          this.newKind = "单选分类"
        } else if (value === 5) {
          this.kindValueOptions = this.$store.state.ruleList.filter(rule => rule.type === 'multi')
          this.newKind = "多选分类"
        } else if (value === 9) {
            this.kindValueOptions = this.$store.state.knowledgeLibList
            this.newKind = "选择知识库"
        } else {
          this.showKindValueSelection = false
        }
      },
    }
  }
</script>

<style scoped>

</style>
